<template>
  <van-list :offset="20" :loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <ul class="goodslist-box" ref="imgBoxRef" :style="{ height: ulheight + 'px' }">

    </ul>
  </van-list>

</template>

<script>
export default {
  data() {
    return {
      loading: true,
      finished: false,
      goodsList: [],//存储所有的商品
      tempList: [],//存储本次请求的商品
      tops: [0, 0],//定义一个数组，保存当前两列的top值，对图片定位的值。
      ulheight: 0,//父容器的高度，需要安装子元素的最大高度进行计算。
      count: 1,//当前页码
      limitNum: 10,//每页的条数,
      tempCount: 0,
      // 临时记忆
      createImgCount: 0,
      updatePosCount: 0,
      ulBox: null,
    }
  },
  created() {
    this.getImgs(1, 10);
  },
  mounted() {
    this.ulBox = this.$refs.imgBoxRef;
  },
  methods: {
    getImgs() {
      this.loading = true;
      this.$http.get("/pro/list", {
        params: { count: this.count, limitNum: this.limitNum }
      })
        .then(res => {
          this.count++;
          if (res.data.code === "200") {
            if (res.data.data.length == 0) {//表示数据获取完毕
              this.finished = true;
              console.log("this.finished", this.finished);
              return;
            }
            this.tempList = res.data.data;//把本次请求的数据赋给tempList
            this.goodsList.push(...this.tempList);
            // 给本次请求到的商品，创建dom元素。
            this.createImg();
          }
        })
    },
    createImg() {
      this.createImgCount++;
      console.log("创建次数", this.createImgCount);
      this.tempCount = 0;
      // 循环本次请求的商品。创建dom元素。
      this.tempList.forEach((item, index) => {
        // 创建li
        let liDom = document.createElement("li");
        liDom.style.cssText = `position:absolute;top:-10000px;width:45%;border:1px solid #ededed;border-radius:20px;overflow-hidden`;
        // 创建图片。
        let imgDom = new Image();
        // imgDom.onload = this.imgLoadFn;
        imgDom.onload = ()=> {
          this.tempCount++;
          if (this.tempCount >= this.tempList.length) {
            this.updatePosCount++;
            this.updatePos(this.ulBox);
            this.tempCount = 0;
            console.log("更新位置的次数：", this.updatePosCount);
            console.log("this.tops", this.tops);
          }
        };
        imgDom.onerror = () => {
          console.log("onerror");
          imgDom.src = "/imgs/logo.png";
          imgDom.style.height = "100px";
        }
        imgDom.src = item.img2;
        imgDom.style.cssText = `width:100%;`;
        // 插槽内容：
        // 创建商品名称
        let pName = document.createElement("p");
        pName.style.cssText = `
            padding: 5px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        `;
        pName.innerHTML = item.proname;
        // 创建价格
        let pPrice = document.createElement("p");
        pPrice.style.cssText = "text-align:center;color:red;font-weiht:blod";
        pPrice.innerHTML = item.originprice;

        liDom.appendChild(imgDom);
        liDom.appendChild(pName);
        liDom.appendChild(pPrice);
        this.ulBox.appendChild(liDom);
      })
    },
    imgLoadFn() {
      this.tempCount++;
      if (this.tempCount >= this.tempList.length) {
        this.updatePosCount++;
        this.updatePos(this.ulBox);
        this.tempCount = 0;
        console.log("更新位置的次数：", this.updatePosCount);
        console.log("this.tops", this.tops);
      }
    },
    // 重新定位图片的函数
    updatePos(box) {
      let liDoms = box.children;
      // 重新给新增加的图片赋值left和top。
      for (let i = this.goodsList.length - this.tempList.length; i < this.goodsList.length; i++) {
        let idx = this.tops[0] <= this.tops[1] ? 0 : 1;//图片应该放在左侧还是右侧。
        liDoms[i].style.left = (idx == 0 ? "2.5%" : "50%");
        liDoms[i].style.top = this.tops[idx] + "px";
        this.tops[idx] += liDoms[i].offsetHeight + 10;
      }
      this.ulheight = this.tops[0] > this.tops[1] ? this.tops[0] : this.tops[1];
      this.loading = false;
    },
    onLoad() {
      if (this.loading || this.finished) {
        return;
      }
      console.log("onLoad");
      this.getImgs();
    }
  }

}
./GoodsList(ok01_绝对定位方式效率太低）.vue</script>

<style scoped>
.goodslist-box {
  width: 100%;
  position: relative;
}

.goodslist-box:after {
  content: "ww";
  height: 0;
  clear: both;
  overflow: hidden;
  display: block;
  visibility: hidden;
}

.goodslist-box li {
  position: absolute;
  width: 100px;
}

.goodslist-box li img {
  width: 100%;
  margin-bottom: 60px;

}
</style>